<template>
  <div class="suggestion-list">
    <el-tabs v-model="activeTab" @tab-click="handleChangeTab" type="card">
      <el-tab-pane label="未处理" name="unresolved"></el-tab-pane>
      <el-tab-pane label="已处理" name="resolved"></el-tab-pane>
    </el-tabs>
    <!-- 搜索与添加 -->
    <div class="search-add">
      <el-input v-model="searchContent" placeholder="联系方式" style="width: 200px;"></el-input>
      <el-button @click="handleSearch" type="primary">搜索</el-button>
      <el-input v-model="newSuggestion.content" placeholder="建议内容"
                style="width: 200px; margin-left: 10px;"  v-if="chooseStatus==='未处理'"></el-input>
      <el-input v-model="newSuggestion.phone" placeholder="联系方式"
                style="width: 200px; margin-left: 10px;"  v-if="chooseStatus==='未处理'"></el-input>
      <el-button @click="handleAdd" type="primary"  v-if="chooseStatus==='未处理'">添加</el-button>
    </div>

    <!-- 表格 -->
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column type="index" label="序号" width="80" align="center">
      </el-table-column>
      <el-table-column prop="content" label="内容" align="center">
        <template #default="scope">
          <div v-if="editingRow === scope.row.uuid">
            <el-input v-model="scope.row.content"/>
          </div>
          <div v-else>
            {{ scope.row.content }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="phone" label="联系方式" align="center"></el-table-column>
      <el-table-column prop="time" label="创建时间" align="center"></el-table-column>
      <el-table-column prop="status" width="100" label="状态" align="center"></el-table-column>
      <el-table-column label="操作" align="center">
        <template #default="scope">
          <el-button size="small" @click="handleEdit(scope.row)">
            {{ editingRow === scope.row.uuid ? '保存' : '编辑' }}
          </el-button>
          <el-button size="small" type="success" @click="handleProcess(scope.row)">
            标记处理
          </el-button>
          <el-button size="small" type="danger" @click="handleDelete(scope.row.uuid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页器 -->
    <div class="pagination">
      <el-pagination
          layout="prev, pager, next"
          :total="total"
          :page-size="pageSize"
          @current-change="handlePageChange"
      />
    </div>
  </div>
</template>
<script>
import {saveSuggestion, getSuggestionByPageAndPhone, updateSuggestion, deleteSuggestion} from '@/utils/apis/suggestion'

export default {
  name: 'SuggestionList',
  data() {
    return {
      tableData: [], // 表格数据
      total: 0, // 总条目数
      pageSize: 10, // 每页显示数量
      currentPage: 1, // 当前页码
      searchContent: '', // 搜索框内容
      newSuggestion: {
        content: '',
        phone: ''
      }, // 新增内容
      editingRow: null, // 正在编辑的行 ID
      chooseStatus: '未处理',
      activeTab: 'unresolved'
    }
  },
  mounted() {
    this.fetchData()
  },
  methods: {
    // 获取数据
    async fetchData(page = 1) {
      try {
        const res = await getSuggestionByPageAndPhone(this.searchContent, page, this.pageSize, this.chooseStatus)
        console.log('获取数据成功:', res)
        this.tableData = res.data.data.records || []
        this.total = res.data.data.total
        this.currentPage = page
      } catch (error) {
        console.error('获取数据失败:', error)
      }
    },

    // 处理搜索
    handleSearch() {
      this.fetchData(1)
    },

    // 处理新增
    async handleAdd() {
      if (!this.newSuggestion.content.trim() && !this.newSuggestion.phone.trim()) return
      try {
        await saveSuggestion(this.newSuggestion)
        this.$message.success('添加成功')
        this.newSuggestion = {
          content: '',
          phone: ''
        }
        this.fetchData(this.currentPage)
      } catch (error) {
        console.error('添加失败:', error)
      }
    },

    // 处理编辑
    async handleEdit(row) {
      if (this.editingRow === row.uuid) {
        // 保存修改
        try {
          console.log(row)
          await updateSuggestion(row)
          this.$message.success('更新成功')
          this.editingRow = null
        } catch (error) {
          console.error('更新失败:', error)
          this.$message.success('更新成功')
        }
      } else {
        // 进入编辑模式
        this.editingRow = row.uuid
      }
    },

    // 处理删除
    handleDelete(uuid) {
      this.$confirm('确定要删除吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          await deleteSuggestion(uuid)
          this.$message.success('删除成功')
          this.fetchData(this.currentPage)
        } catch (error) {
          console.error('删除失败:', error)
        }
      }).catch(() => {
      })
    },

    // 分页切换
    handlePageChange(page) {
      this.fetchData(page)
    },

    handleChangeTab(tab) {
      this.chooseStatus = tab.name === 'unresolved' ? '未处理' : '已处理'
      this.fetchData(1)
    },
    async handleProcess(row) {
      let param = row
      row.status = "已处理"
      await updateSuggestion(param)
      this.fetchData(this.currentPage)
      this.$message.success('标记成功')
    }
  }
}
</script>


<style scoped>
.suggestion-list {
  padding: 20px;
}

.search-add {
  margin-bottom: 20px;
}

.pagination {
  margin-top: 20px;
  text-align: right;
}
</style>
